<template>
<div>
  <my-head></my-head>
    <div>
      <template>
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in items" :key="item.rId">
            <!--<h3 class="medium">{{ item }}</h3>-->
            <el-image
              style="width:100%; height: 100%"
              :src="item.rotationImage"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
      <div>
        <el-divider>
          <p style="font-family:verdana;font-size:200%;color:green">正在热映
          </p>
        </el-divider>
      </div>
      <div class="line"></div>
    </div>
    <div style="margin-left: 0%">
      <el-row>
        <el-col :span="5" v-for="(o, index) in movie" :key="index" :offset="index > 2 ? 1 : 1">
          <el-card :body-style="{ padding: '5px' }">
            <img :src="o.poster" class="image">
            <div style="padding: 30px;">
              <span>{{o.movieName}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ o.description | ellipsis }}</time>
                <el-button type="success" @click="movieDetail(o.movieId,o.typeId)" class="button" >点击查看</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-divider>
        <p style="font-family:verdana;font-size:200%;color:green">即将上映
        </p>
      </el-divider>
    </div>
</div>

</template>

<script>
  export default {
    data() {
      return {
        items:[],
        movie:[],
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      rotation_chart:function () {
        this.$axios.get("/rote/findRotation").then(res=>{

          if (res.data.code==0){
            this.items =  res.data.data;
            console.log(this.items);

          }
        })

      },
      findMoive:function () {
        this.$axios.post("/movie/findAll").then(res=>{
          if (res.data.code==0){

            this.movie=res.data.data;
          }
        })
      },
      movieDetail:function(movieId,typeId){
        this.$router.push({name:'filmDetails',params:{id:movieId,type:typeId}});
      },
      movie_show:function () {
        this.$router.push("/movieShow/");
      },
      cinema_show:function () {
        this.$router.push("/cinemaShow/");
      },
      playing:function () {
        this.$router.push("/playing/");
      },
      movie_list:function () {
        this.$router.push("/movieList/");
      },
      hot_new:function () {
        this.$router.push("/hotNew/");
      },
      shopping_mall:function () {
        this.$router.push("/shoppingMall/");
      },
    },
    mounted(){
      this.rotation_chart();
      this.findMoive();
    },
    filters: {
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 30) {
          return value.slice(0, 30) + "...";
        }
        return value;
      }
    }

  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  /*.bottom {
    margin-top: 13px;
    line-height: 12px;
  }*/

  /*.button {
    padding: 0;
    float: right;
  }*/

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
